<template>
    <div class="newsCommentListAdd">
        
        <el-form 
            ref="ruleForm" 
            label-width="100px"
            :model="ruleForm"
            :rules="rules">


            <el-form-item label="小程序名称" prop="appid">
                <el-select v-model="ruleForm.appid" placeholder="请选择小程序名称"  @change="handleChange">
                    <el-option :label=item.appname :value=item.appid v-for="(item,index) in options" :key="index">{{item.appname}}</el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="分类名称" prop="name">
                <el-select v-model="ruleForm.name" placeholder="请选择分类名称"  @change="handleChange1">
                    <el-option :label=item.name :value=item.id v-for="(item,index) in option" :key="index">{{item.name}}</el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="文章名称" prop="name">
                <el-select v-model="ruleForm.textName" placeholder="请选择文章名称"  @change="handleChange2" filterable>
                    <el-option :label=item.title :value=item.id v-for="(item,index) in opt" :key="index">{{item.title}}</el-option>
                </el-select>
            </el-form-item>





            <el-form-item label="用户头像" prop="title">
                <el-upload
                    class="upload-demo"
                    action="https://www.yyjpai.com/index/operate/uploadsImg"
                    :on-success=handleAvatarSuccess
                    :on-exceed="handleExceed"
                    name="file"
                    :limit=limit
                    list-type="picture">
                    <el-button size="small" type="primary">上传图片</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>

            <el-form-item label="用户昵称" prop="nickname">
                <el-input v-model="ruleForm.nickname" placeholder="请输入用户昵称"></el-input>
            </el-form-item>



            <el-form-item label="评论内容" prop="content">
                <el-input v-model="ruleForm.content" placeholder="请输入评论内容" type="textarea"></el-input>
            </el-form-item>



            <!-- <el-form-item label="点赞次数" prop="jiaThumbsUp">  
                <el-input v-model="ruleForm.jiaThumbsUp" placeholder="请输入点赞次数"></el-input>
            </el-form-item> -->


        </el-form>
       <el-button @click="submitForm('ruleForm')" size="medium" class="addSubimit">提交</el-button>
    </div>
</template>
<script>
import { AddData,getChannel } from '@/assets/js'
export default {
    data(){
        return {
            options:[],//选择小程序
            option:[],//选择分类
            opt:[],//选择文章
            limit:1,//上传文件个数
            imgUrl:'',//图片路径
            ruleForm:{//下拉选中
                nickname:'',//用户名称
                content:'',//评论内容
                textName:'',//文章列表
            },
            appid:'',//小程序ID
            ptid:'',//分类ID
            biid:'',//文章ID
            rules:{//验证
                nickname:[
                    { required: true, message: '请输入用户昵称', trigger: 'blur' }
                ],
                content:[
                    { required: true, message: '请输入评论内容', trigger: 'blur' }
                ]
            }
        }
    },
    mounted:function(){
        getChannel(this)
    },
    methods:{
        handleExceed(files, fileList){
            this.$notify.error({
                title: '错误',
                message: '最多只能上传'+this.limit+'张图哦~'
            });
        },
        handleAvatarSuccess(res, file) {//上传成功之后
            this.imgUrl=file.response.data.logo;
        },
        handleChange2(e){ //选择文章
            this.biid = e;
        },
        handleChange1(e){ //选择分类
            this.ptid = e;

            this.$axios.getAddressJson('/comment/getArticle',{appid:this.appid,tpid:e})
            .then((res)=>{
                this.opt = res.data.data;
                this.ruleForm.textName = this.opt[0].title;
                this.ruleForm.biid = this.opt[0].id;

                console.log(this.opt)
            })
        },
        handleChange(e){//选择小程序
            this.$axios.getAddressJson('/information/getType',{appid:e})
            .then((res)=>{
                this.option = res.data.data;
                this.appid = e;
                this.ruleForm.name = this.option[0].name;
                this.ruleForm.id = this.option[0].id;
                this.ruleForm.textName = '';
                this.ruleForm.biid = '';
            })
        },
        submitForm:function(e){//点击提交
            var data = {
                appid:this.appid,
                // ptid:this.ptid,
                biid:this.biid,
                avatar:this.imgUrl,
                nickname:this.ruleForm.nickname,
                content:this.ruleForm.content,
            }
            console.log(data)
            AddData(this,e,data,'comment/addComment')
            
        }
    }
}
</script>
<style>
    .newsCommentListAdd{
        display: flex;flex-direction: column;
        justify-content: center;
        
    }
    .newsCommentListAdd .el-upload__tip{
        width: 300px;
    }
    .addSubimit{
        margin: 30px auto;
        text-align: center;
    }
</style>
